<template>
    <div class="phoneBox">
        <div class="passwordBox">
            <div class="title">
                <div class="logo">
                    <head-icon class="fl company-icon" size="40px" fontSize="15px" :img="shareData.organizationLogo" :name="shareData.organizationId"
                               :border="null" :status="true"></head-icon>
                </div>
                <p v-text="shareData.organizationName">我的公司</p>
            </div>
            <div class="content">
                <div class="name">
                    <p v-text="shareData.userName">张磊</p>
                    <span>给您分享了文件</span>
                </div>
                <div class="text">
                    <p>提取文档手机号为：<span v-text="phone">23321311</span></p>
                    <p>请输入正确的验证码提取文档。</p>
                </div>
                <div class="inp">
                    <input type="text" placeholder="请输入提取密码" v-model="verificationCode"/>
                    <button class="button" @click="getPhone">
                        <span v-if="buttonType === 0">获取验证码</span>
                        <span v-if="buttonType > 0" v-text="timeText"></span>
                    </button>
                </div>
                <div class="but">
                    <button @click="getFileList">提取文件</button>
                </div>
            </div>
        </div>
        <div class="bc"></div>
    </div>
</template>

<script>
  import HeadIcon from '@/components/HeadIcon.vue'

  export default {
    components:{
      HeadIcon
    },
    data() {
      return {
        phone: '',
        time: 60,
        timeText: '',
        verificationCode: '',
        buttonType: 0
      }
    },
    props: {
      shareData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    mounted() {
      this.phone = this.shareData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      const currentTime = new Date()
      const historyTime = localStorage.getItem('verificationCodeTime')
      if (historyTime && historyTime !== '' && historyTime - currentTime.getTime() > 0) {
        this.time = Math.floor((historyTime - currentTime.getTime()) / 1000)
        if (this.time > 0) {
          this.buttonType = 1
          this.rebuildTimeText()
        }
      }

    },
    methods: {
      getFileList: function () {
        if (this.verificationCode === '') {
          return this.$message({
            type: 'error',
            message: '请填写提取码'
          })
        }
        const that = this
        this.$http.post('/pan//getShareFiles',{
          shareId: this.shareData.id,
          type: this.shareData.type,
          verify: this.verificationCode,
          version: "v1"
        }).then(function (data) {
          if (data.data.code === 1) {
            that.approved(true,data.data.data)
            localStorage.setItem(that.shareData.id, this.verificationCode)
          } else {
            that.approved(false)
          }
        })
      },
      approved: function (status,data) {
        this.$emit('approvedOver', {
          status:status,
          fileList:data.fileRelations,
          tokenData:data.uploadFileTokenVO,
          token:data.token,
          ossKey:data.ossKey
        })
      },
      getPhone: function () {
        const that = this
        if(that.buttonType === 1) return
        this.$http.get(`/verify/api/v1/sms/${this.shareData.phone}/10`).then(function (data) {
          if(data.data.code === 1){
            that.buttonType = 1
            const currentTime = new Date()
            localStorage.setItem('verificationCodeTime', currentTime.getTime() + 60000)
            that.time = 60
            that.rebuildTimeText()
          }
        })
        // that.buttonType = 1
        // const currentTime = new Date()
        // localStorage.setItem('verificationCodeTime', currentTime.getTime() + 60000)
        // that.time = 60
        // this.rebuildTimeText()
      },

      rebuildTimeText: function () {
        const that = this
        if (this.time > 0) {
          this.timeText = `重新发送(${that.time})`
          setTimeout(function () {
            that.time = that.time - 1
            that.rebuildTimeText()
          }, 1000)
        } else {
          this.buttonType = 2
          this.timeText = '重新发送'
        }
      }
    }
  };
</script>


<style scoped>
    .phoneBox {
        width: 100%;
        height: calc(100vh - 60px);
    }

    .passwordBox {
        width: 410px;
        height: 360px;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-left: -205px;
        box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.14);
        border-radius: 10px;
        z-index: 9;
    }

    .passwordBox .title {
        height: 80px;
        background: url(../../assets/icon/share/background1.png) no-repeat;
        background-size: 100%;
    }

    .passwordBox .title .logo {
        width: 40px;
        height: 40px;
        overflow: hidden;
        float: left;
        margin-top: 20px;
        margin-left: 30px;
    }

    .passwordBox .title .logo img {
        width: 100%;
        height: 100%;
    }

    .passwordBox .title p {
        float: left;
        line-height: 40px;
        margin-left: 10px;
        color: #fff;
        margin-top: 20px;
    }

    .passwordBox .content {
        margin: 0 40px;
    }

    .passwordBox .content .name {
        margin-top: 25px;
    }

    .passwordBox .content .name p {
        font-size: 20px;
        color: rgb(51, 51, 51);
        display: inline-block;
    }

    .passwordBox .content .name span {
        font-size: 12px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        margin-left: 12px;
    }

    .passwordBox .content .text {
        margin-top: 28px;
        font-size: 14px;
    }

    .passwordBox .content .text p {
        margin-top: 10px;
    }

    .passwordBox .content .text span {
        color: #4690F5;
    }

    .passwordBox .content .inp {
        width: 100%;
        height: 40px;
        background: rgba(248, 248, 248, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        margin-top: 30px;
        border-radius: 4px;
    }

    .passwordBox .content .inp .button {
        color: #666666;
        background: rgba(248, 248, 248, 1);
        border: none;
        position: relative;
        overflow: visible;
        height: 38px;
        margin-right: 20px;
        float: right;
    }

    .passwordBox .content .inp .button:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 20px;
        background: rgba(229, 229, 229, 1);
        left: -17px;
    }


    .passwordBox .content .inp input {
        height: 40px;
        border: none;
        background: none;
        padding-left: 20px;
        width: 200px;
    }

    .passwordBox .content .but button {
        width: 100%;
        height: 40px;
        background: rgba(70, 144, 245, 1);
        border-radius: 4px;
        border: none;
        color: #fff;
        margin-top: 30px;
    }

    .bc {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 300px;
        background: url(../../assets/icon/share/background_box.png) no-repeat;
        background-size: 100%;
    }
</style>
